//盒子相对视口的距离；封装方法
Element.prototype.getToViewport = function (e) {
  var result = {
    top: 0,
    left: 0,
  };
  function compute(el) {
    if (el.offsetParent) {
      result.top += el.offsetTop;
      result.left += el.offsetLeft;
      compute(el.offsetParent);
    } else {
      return result;
    }
  }
  compute(this);
  return result;
};

// console.log(body.offsetTop)

var Color = document.getElementById("color"),
  eraser = document.getElementsByClassName("eraser_box")[0],
  clear_screen = document.getElementsByClassName("clear_screen")[0],
  undo = document.getElementsByClassName("Undo")[0],
  canvas = document.getElementsByTagName("canvas")[0],
  stroke_width = document.getElementsByClassName("stroke_width")[0],
  canvasBox = document.getElementsByClassName("canvas_box")[0],
  strokes_box = document.getElementsByClassName("strokes_box")[0],
  line_width = (30 * stroke_width.offsetWidth) / strokes_box.offsetWidth;
var eraser_clock = true; //橡皮开关；

var canvas_arr = [];

//画板主体。
function canvasBoard(eraser_btn) {
  if (!canvas.getContext) return;
  var ctx = canvas.getContext("2d");
  ctx.lineJoin = "round";
  canvas.onmousedown = function (e) {
    var x = e.offsetX;//获得相对原对象的距离
    var y = e.offsetY;

    canvas_arr.push(
      ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight)
    );//将前一张画板上的内容截屏下来并保存到数组内，方便撤销时调用前面的画面
    ctx.beginPath();//创建路径；
    ctx.moveTo(x, y);
    ctx.strokeStyle = "" + Color.value;
    if (eraser_btn) {
      ctx.strokeStyle = "rgb(255, 255, 255)";
    }
    ctx.lineWidth = line_width;
    document.onmousemove = function (e) {
      var x = e.pageX - canvas.offsetLeft;
      var y = e.pageY - canvas.offsetTop;
      ctx.lineTo(x, y);
      ctx.stroke();
    };
    document.onmouseup = function () {
      document.onmousemove = null;
    };
  };
  //撤销
  undo.onclick = function () {
    if (canvas_arr.length > 0) {
      //将上一步的内容截屏放到画板上，形成返回上一步的效果
      ctx.putImageData(canvas_arr[canvas_arr.length - 1], 0, 0);
        canvas_arr.pop();
    }
  };
   // 清屏
  clear_screen.onclick = function () {
    if (canvas_arr.length > 0) {
      canvas_arr.push(//将清屏前一步的画板内容截屏保存
        ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight)
      );
      //将第一步保存的空白画板画面放到画板上；
      ctx.putImageData(canvas_arr[0], 0, 0);
    }
    clear_undo_clock = false;
  };
  //  颜色改变时重新生成路径
  Color.onclick = function () {
    eraser.style.boxShadow = "none";
    canvasBoard();
  };
  eraser.onclick = function () {
    if (eraser_clock) {
      canvasBoard(true);
      eraser.style.boxShadow = "0 1px 3px #888";
      eraser_clock = false;
      console.log("nice");
    } else {
      canvasBoard();
      eraser.style.boxShadow = "none";
      eraser_clock = true;
    }
  };
  // 画笔粗细控制
  function stroke_weight() {
    strokes_box.onmousedown = function () {
      document.onmousemove = function (e) {
        var Width = e.pageX - strokes_box.getToViewport().left;
        if (Width >= 5 && Width <= strokes_box.offsetWidth) {
          stroke_width.style.width = Width + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        line_width = (30 * stroke_width.offsetWidth) / strokes_box.offsetWidth;
        canvasBoard();
      };
    };
  }
  stroke_weight();
}

canvasBoard();
